Ext.ns('ru.proburo.oms.catalog.components');

/**
 * ru.proburo.oms.catalog.components.Detail
 * @extends Ext.Panel
 */
ru.proburo.oms.catalog.components.Detail = Ext.extend(Ext.Panel, {
    
    startingMarkup: '<div style="text-align: center; margin-top: 140px;">Нет элементов для отображения</div>',
    
    tpl: new Ext.XTemplate(
        '<table class="details" cellpadding="0" cellspacing="0" border="0">',
            '<col width="320" />',
            '<col width="auto" />',
            '<tpl for=".">',
                '<td>',
					'<img id="item-image" src="{image}" alt="" width="300" />',
					'<br clear="all" />',					
					'<tpl for="images">',
						'<a class="item-image-button" href="#" image="{.}">{#}</a>&nbsp;',
					'</tpl>',
				'</td>',
                '<td class="details-info">',
                    '<b>Код:</b>',
                    '<span>{sku}</span>',
                    '<b>Наименование:</b>',
                    '<span>{name}</span>',
                    '<b>Производитель:</b>',
                    '<span>{vendor}, {country}</span>',
                    '<b>Артикул:</b>',
                    '<span>{article}</span>',
                    '<b>Цена:</b>',
                    '<span>{price:ruMoney} <i>руб.</i></span>',
                '</td>',
            '</tpl>',
        '</table>',
		{
			compiled: true
		}
	),
    
    constructor: function(config)
	{
		config = config || {};
        
        Ext.applyIf(config, {
			bodyStyle: {
				background: '#FFFFFF',
				padding: '7px'
			},
			html: this.startingMarkup,
			bbar: [
				'->'
			]
		});
        
        ru.proburo.oms.catalog.components.Detail.superclass.constructor.call(this, config);
    },
    
    initEvents: function()
    {
        ru.proburo.oms.catalog.components.Detail.superclass.initEvents.call(this);
        
		this.list.getSelectionModel().on('selectionchange', this._onListSelectionChange, this);
    },
	
    // private
	_onListSelectionChange: function(sm)
    {
		if(sm.getCount())
		{
			var data = sm.getSelected().data;
			
			this.setImageUrls(data);
			
			this.tpl.overwrite(this.body, data);
			
			Ext.each(Ext.DomQuery.jsSelect('a[class=item-image-button]'), function(btn){
				Ext.fly(btn).on('click', function(){
					document.getElementById('item-image').src = this.getAttribute('image');
				});
			});
		}
		else
		{
			this.update(this.startingMarkup);
		}
	},
	
	_getImageCount: function(data)
	{
		var sku   = data.sku;
		var path  = 'resources/images/data/350x350/';
		var rp 	  = air.File.applicationDirectory.resolvePath;
		var count = 0;
		var src   = path+sku+'.gif';
		var image = rp(src);
		
		data.images = [];
		
		
		while(true === image.exists)
		{
			count++;
			image = rp(path+sku+'_'+count+'.gif');
			
			console.log(data.images.length);
			
			var imageSrc = path+sku;
			
			if(count > 1)
			{
				imageSrc += '_'+(count-1);
			}
			
			imageSrc += '.gif';
			
			data.images.push({index: count, src: imageSrc});
		}
		
		if(count==1)
		{
			data.images = [];
		}
		
		return count;
	},
	
	setImageUrls: function(data)
	{
		var di = data.images = [];
		
		while(di.length < 10)
		{
			var image = this.resolveImage(data.sku, di.length);
			
			if(true !== image.exists)
			{
				break;
			}
			
			di.push(image.url);
		}
		
		data.image = di[0];
	},
	
	resolveImage: function(sku, i)
	{
		var url = sku;
		
		if(i > 0)
		{
			url += '_'+i;
		}
		url += '.gif';
		
		if(Ext.isAir)
		{
			return air.File.applicationDirectory.resolvePath('app:/resources/images/data/350x350/'+url);
		}
		else
		{
			return {
				url:    'http://images.proburo.ru/c/350/'+url,
				exists: true
			};
		}
	}
});